<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('快捷设置列类型')}`">{{ $t('快捷设置列类型') }}</t>
            <li>
                在上面的示例中，我们提到了
                <span class="d-code">table-column</span>的通用配置项，除此以外，它还根据所配置的列类型
                <span class="s-code">type</span>，允许指定一些特殊配置项。
            </li>
            <li>
                列类型<span class="s-code">type</span>目前一共有
                <span class="d-code">9</span>种，分别是
                <span class="s-code">"slot" (插槽)</span>|
                <span class="s-code">"button" (按钮)</span>|
                <span class="s-code">"image" (图片)</span>|
                <span class="s-code">"timeStamp" (时间戳)</span>|
                <span class="s-code">"tag" (标签)</span>|
                <span class="s-code">"clickInput" (点击可输入)</span>|
                <span class="s-code">"switch" (滑块)</span>|
                <span class="s-code">"popover" (浮窗提示)</span>|
                <span class="s-code">"text" (纯文本)</span>，
            </li>
            <li>
                当你没有配置<span class="s-code">type</span>时，
                组件内部会默认将该列的单元格内容展示为<span class="s-code">"text" (纯文本)</span>
            </li>
        </template>
        <div style="margin-bottom: 10px;">
            <el-button @click="handleDeleteColumn">删除最后一列</el-button>
            <el-button @click="handleAddColumn">新增一列</el-button>
            <el-button @click="handleChangeType">切换【姓名】列类型</el-button>
            <el-button @click="handleChangeRule">切换【出生日期】列格式化规则</el-button>
        </div>
        <sib-table
            row-key="rowId"
            :table-column="tableColumn"
            :table-data="tableData">
            <!-- 自定义插槽，插槽名称为对应列配置的 code -->
            <template #operate="{ row, index, realIndex }">
                <el-button size="small" type="primary" plain @click="handleEditRow(row, index, realIndex)">编辑</el-button>
                <el-button size="small" type="danger" plain @click="handleDeleteRow(row, index, realIndex)">删除</el-button>
            </template>
        </sib-table>
    </example>
</template>

<script>
import { ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';

export default {
    setup() {
        const tableColumn = ref([
            {
                label: '姓名',
                code: 'name',
                type: 'button',
                minWidth: 100,
                // 非必传，element按钮图标的名称; 例如: "Search"
                icon: 'Search',
                // 非必传，是否禁用，Function(row) / Boolean
                disabled: (row) => row.age < 12,
                // 非必传，筛选出满足条件的值作为按钮展示，其他值则作为文本展示，若未配置 filter 则全部作为按钮展示，参数为 row
                filter: (row) => row.age < 14,
                // 点击按钮时触发的事件，参数为 (row, config)
                handler: (row) => {
                    ElMessageBox.alert(`姓名：${row.name}；年龄：${row.age}`, '温馨提示').catch(() => {});
                },
            },
            {
                label: '性别',
                code: 'sex',
            },
            {
                label: '出生日期',
                code: 'birthday',
                // 如果值类型为时间戳，配置 type = 'timeStamp' 即可实现自动将其转换为日期格式的数据
                type: 'timeStamp',
                // 格式化规则；规则示例: YYYY-MM-DD hh:mm:ss:S q 任意组合，S: 毫秒数, q: 当年季度；组件内默认为: 'YYYY-DD-MM'
                format: 'YY-MM-DD',
                minWidth: 150,
            },
            {
                label: '年龄',
                code: 'age',
            },
            {
                label: '家庭概况',
                code: 'family',
                type: 'popover',
                // 标题；Function 的参数为 (row, config)
                title: (row) => `${row.name}的家庭情况`,
                // 内容；Function 的参数为 (row, config)；默认值为 单元格的内容
                content: (row) => `${row.name}来自${row.baseInfo.from}，他的家庭人口一共有 ${row.baseInfo.peopleNum} 个`,
                // Tooltip 的宽度；默认值: "auto"
                popoverWidth: 200,
                // 是否禁用；Function 的参数为 (row, config)；
                disabled: (row) => row.age < 12,
            },
            {
                label: '照片',
                code: 'avatar',
                type: 'image',
                minWidth: 100,
            },
            {
                label: '爱好',
                code: 'hobby',
                type: 'tag',
                // Tag 的类型；可选值: 'success' | 'info' | 'warning' | 'danger'；Function 参数为 (row, config)，需要 return 可选值中的任意一个类型
                tagType: (row) => (row.hobby === '跳舞' ? 'danger' : 'success'),
            },
            {
                label: '座右铭',
                code: 'motto',
                type: 'clickInput',
                // 输入框最大输入长度
                maxlength: 100,
                // 自定义前缀图标
                prefixIcon: 'MagicStick',
                // 点击提交前的回调函数，参数为 (value, row)， 返回 false 或者返回 Promise 且被 reject 则取消修改
                beforeConfirm: (value, row) => new Promise((resolve, reject) => {
                    setTimeout(() => {
                        if (row.name === '李四2号') {
                            ElMessage({ message: '李四2号的座右铭不允许修改', type: 'warning' });
                            reject();
                            return;
                        }
                        resolve();
                    }, 1000);
                }),
            },
            {
                label: '状态',
                code: 'status',
                type: 'switch',
                // 是否禁用; function(row, config) | Boolean
                disabled: (row) => row.age > 12,
                // switch的状态为 on 时的值; 默认值 true
                activeValue: 1,
                // switch的状态为 off 时的值; 默认值 false
                inactiveValue: 0,
                // switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换
                // beforeChange: (value) => value === 1, // 只允许打开，不允许关闭
                beforeChange: (value, row) => new Promise((resolve, reject) => {
                    setTimeout(() => {
                        if (row.name === '李四2号' && value === 0) {
                            ElMessage({ message: '李四2号的状态不允许关闭', type: 'warning' });
                            reject();
                            return;
                        }
                        resolve();
                    }, 1000);
                }),
            },
            {
                label: '自定义插槽',
                code: 'operate',
                // type 配置为 'slot' 将开启自定义插槽
                type: 'slot',
                minWidth: 140,
            },
        ]);
        const tableData = ref(Array(10).fill().map((_, i) => ({
            rowId: i + 1,
            name: `${i % 2 ? '李四' : '张三'}${i + 1}号`,
            sex: i % 2 ? '女' : '男',
            birthday: 1646870838280,
            hobby: i % 2 ? '跳舞' : '打球',
            status: i % 2,
            age: i + 10,
            motto: i === 1 ? '李四2号不允许修改座右铭和状态' : '点击可以修改座右铭：世上本没有路，走的人多了，也便成了路。',
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            family: '家庭组成',
            baseInfo: {
                peopleNum: i + 1,
                from: '湖南湘潭',
            },
        })));

        return {
            tableColumn,
            tableData,
            handleEditRow(row, index, realIndex) {
                // eslint-disable-next-line
                console.log('row, index ,realIndex: ', row, index, realIndex);
            },
            handleDeleteRow(row, index, realIndex) {
                // eslint-disable-next-line
                console.log('row, index ,realIndex: ', row, index, realIndex);
                tableData.value.splice(index, 1);
            },
            handleAddColumn() {
                tableColumn.value.push({
                    label: `列${tableColumn.value.length + 1}`,
                    code: `code${Math.random()}`,
                });
            },
            handleDeleteColumn() {
                tableColumn.value.splice(tableColumn.value.length - 1, 1);
            },
            handleChangeType() {
                const lastType = tableColumn.value[0].type;
                tableColumn.value[0].type = lastType === 'text' ? 'button' : 'text';
            },
            handleChangeRule() {
                const lastFormat = tableColumn.value[2].format;
                tableColumn.value[2].format = lastFormat === 'YYYY-MM-DD hh:mm' ? 'YYYY年第q季度' : 'YYYY-MM-DD hh:mm';
            },
            templateString: `<template>
    <div class="example-box">
        <div style="margin-bottom: 10px;">
            <el-button @click="handleDeleteColumn">删除最后一列</el-button>
            <el-button @click="handleAddColumn">新增一列</el-button>
            <el-button @click="handleChangeType">切换【姓名】列类型</el-button>
            <el-button @click="handleChangeRule">切换【出生日期】列格式化规则</el-button>
        </div>
        <sib-table
            row-key="rowId"
            :table-column="tableColumn"
            :table-data="tableData">
            <!-- 自定义插槽，插槽名称为对应列配置的 code -->
            <template #operate="{ row, index, realIndex }">
                <el-button size="small" type="primary" plain @click="handleEditRow(row, index, realIndex)">编辑</el-button>
                <el-button size="small" type="danger" plain @click="handleDeleteRow(row, index, realIndex)">删除</el-button>
            </template>
        </sib-table>
    </div>
</template>

<script>
import { ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';

export default {
    setup() {
        const tableData = ref(Array(10).fill().map((_, i) => ({
            rowId: i + 1,
            name: \`\${i % 2 ? '李四' : '张三'}\${i + 1}号\`,
            sex: i % 2 ? '女' : '男',
            birthday: 1646870838280,
            hobby: i % 2 ? '跳舞' : '打球',
            status: i % 2,
            age: i + 10,
            motto: i === 1 ? '李四2号不允许修改座右铭和状态' : '点击可以修改座右铭：世上本没有路，走的人多了，也便成了路。',
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            family: '家庭组成',
            baseInfo: {
                peopleNum: i + 1,
                from: '湖南湘潭',
            },
        })));
        const tableColumn = ref([
            {
                label: '姓名',
                code: 'name',
                type: 'button',
                minWidth: 100,
                // 非必传，element按钮图标的名称; 例如: "Search"
                icon: 'Search',
                // 非必传，是否禁用，Function(row) / Boolean
                disabled: (row) => row.age < 12,
                // 非必传，筛选出满足条件的值作为按钮展示，其他值则作为文本展示，若未配置 filter 则全部作为按钮展示，参数为 row
                filter: (row) => row.age < 14,
                // 点击按钮时触发的事件，参数为 (row, config)
                handler: (row) => {
                    ElMessageBox.alert(\`姓名：\${row.name}；年龄：\${row.age}\`, '温馨提示').catch(() => {});
                },
            },
            {
                label: '性别',
                code: 'sex',
            },
            {
                label: '出生日期',
                code: 'birthday',
                // 如果值类型为时间戳，配置 type = 'timeStamp' 即可实现自动将其转换为日期格式的数据
                type: 'timeStamp',
                // 格式化规则；规则示例: YYYY-MM-DD hh:mm:ss:S q 任意组合，S: 毫秒数, q: 当年季度；组件内默认为: 'YYYY-DD-MM'
                format: 'YY-MM-DD',
                minWidth: 150,
            },
            {
                label: '年龄',
                code: 'age',
            },
            {
                label: '家庭概况',
                code: 'family',
                type: 'popover',
                // 标题；值类型为 Function 或 String，Function 的参数为 (row, config)
                title: (row) => \`\${row.name}的家庭情况\`,
                // 内容；值类型为 Function 或 String， Function 的参数为 (row, config)；默认值为 单元格的内容
                content: (row) => \`\${row.name}来自\${row.baseInfo.from}，他的家庭人口一共有 \${row.baseInfo.peopleNum} 个\`,
                // Tooltip 的宽度；默认值: "auto"
                popoverWidth: 200,
                // 是否禁用；Function 的参数为 (row, config)；
                disabled: (row) => row.age < 12,
            },
            {
                label: '照片',
                code: 'avatar',
                type: 'image',
                minWidth: 100,
            },
            {
                label: '爱好',
                code: 'hobby',
                type: 'tag',
                // Tag 的类型；可选值: 'success' | 'info' | 'warning' | 'danger'；Function 参数为 (row, config)，需要 return 可选值中的任意一个类型
                tagType: (row) => (row.hobby === '跳舞' ? 'danger' : 'success'),
            },
            {
                label: '座右铭',
                code: 'motto',
                type: 'clickInput',
                // 输入框最大输入长度
                maxlength: 100,
                // 自定义前缀图标
                prefixIcon: 'MagicStick',
                // 点击提交前的回调函数，参数为 (value, row)， 返回 false 或者返回 Promise 且被 reject 则取消修改
                beforeConfirm: (value, row) => new Promise((resolve, reject) => {
                    setTimeout(() => {
                        if (row.name === '李四2号') {
                            ElMessage({ message: '李四2号的座右铭不允许修改', type: 'warning' });
                            reject();
                            return;
                        }
                        resolve();
                    }, 1000);
                }),
            },
            {
                label: '状态',
                code: 'status',
                type: 'switch',
                // 是否禁用; function(row, config) | Boolean
                disabled: (row) => row.age > 12,
                // switch的状态为 on 时的值; 默认值 true
                activeValue: 1,
                // switch的状态为 off 时的值; 默认值 false
                inactiveValue: 0,
                // switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换
                beforeChange: (value, row) => new Promise((resolve, reject) => {
                    setTimeout(() => {
                        if (row.name === '李四2号' && value === 0) {
                            ElMessage({ message: '李四2号的状态不允许关闭', type: 'warning' });
                            reject();
                            return;
                        }
                        resolve();
                    }, 1000);
                }),
                // beforeChange: (value) => value === 1, // 只允许打开，不允许关闭
            },
            {
                label: '自定义插槽',
                code: 'operate',
                // type 配置为 'slot' 将开启自定义插槽
                type: 'slot',
                minWidth: 140,
            },
        ]);

        return {
            tableColumn,
            tableData,
            handleEditRow(row, index, realIndex) {
                console.log('row, index ,realIndex: ', row, index, realIndex);
            },
            handleDeleteRow(row, index, realIndex) {
                console.log('row, index ,realIndex: ', row, index, realIndex);
                tableData.value.splice(index, 1);
            },
            handleAddColumn() {
                tableColumn.value.push({
                    label: \`列\${tableColumn.value.length + 1}\`,
                    code: \`code\${Math.random()}\`,
                });
            },
            handleDeleteColumn() {
                tableColumn.value.splice(tableColumn.value.length - 1, 1);
            },
            handleChangeType() {
                const lastType = tableColumn.value[0].type;
                tableColumn.value[0].type = lastType === 'text' ? 'button' : 'text';
            },
            handleChangeRule() {
                const lastFormat = tableColumn.value[2].format;
                tableColumn.value[2].format = lastFormat === 'YYYY-MM-DD hh:mm' ? 'YYYY年第q季度' : 'YYYY-MM-DD hh:mm';
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
